<% content_for :menu do %>
<%= render :partial => "layouts/menu", :locals => {:metriqueuh => true} %>
<% end %>
<script type="text/javascript">jQuery.noConflict();</script>
<% content_for :filAriane do %>
<div id="fil_ariane">
	<%= link_to 'Accueil', :controller => :supervision %>
	&gt;
	Métrique
</div>
<% end %>
<h1>Machines</h1>
<div style=" margin: 0 auto; float:left;display:block;">
<span class="delete"><A href="javascript:;" onClick='pie(<%= @test.to_json %>);'>Répartition des OS</A></span>
<span class="delete"><A href="javascript:;" onClick='column(<%= @salles.to_json %>,<%= @inconnu.to_json %>,<%= @linux.to_json %>,<%= @mac.to_json %>,<%= @win7.to_json %>,<%= @XP.to_json %>);'>Répartition des machines/salles</A></span>
</div><br/>
<div id="os"style=" margin: 0 auto"></div>
<br/>
<h1>Incidents</h1>
<div style=" margin: 0 auto; float:left;display:block;">
<span class="delete"><A href="javascript:;" onClick='ramalert(<%=@incram.to_json.gsub /"/, ''%>,<%=@inccpu.to_json.gsub /"/, ''%>,<%=@incagent.to_json.gsub /"/, ''%>,<%=@incdisk.to_json.gsub /"/, ''%>);'>2012</A></span>
<span class="delete"><A href="javascript:;" onClick='ramalert(<%=@incram2011.to_json.gsub /"/, ''%>,<%=@inccpu2011.to_json.gsub /"/, ''%>,<%=@incagent2011.to_json.gsub /"/, ''%>,<%=@incdisk2011.to_json.gsub /"/, ''%>);'>2011</A></span>
</div><br/>
<div id="alert"style=" margin: 0 auto"></div>

<div id="chart"></div>





 
 <script type="text/javascript">
var chart;
pie(<%= @test.to_json %>);
ramalert(<%=@incram.to_json.gsub /"/, ''%>,<%=@inccpu.to_json.gsub /"/, ''%>,<%=@incagent.to_json.gsub /"/, ''%>,<%=@incdisk.to_json.gsub /"/, ''%>);
function pie(test){
jQuery(document).ready(function() {
   chart = new Highcharts.Chart({
      chart: {
         renderTo: 'os',
         plotBackgroundColor: null,
         plotBorderWidth: null,
         plotShadow: false
      },
      title: {
         text: 'Répartition des OS'
      },
      tooltip: {
         formatter: function() {
            return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
         }
      },
      plotOptions: {
         pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
               enabled: true
            },
            showInLegend: true
         }
      },
       series: [{
         type: 'pie',
         name: 'Répartition des OS',
         data: test
      }]
   });
});

}

var chart2;

function column(salles,inconnu,linux,mac,win7,XP){

   chart2 = new Highcharts.Chart({
      chart: {
         renderTo: 'os',
         defaultSeriesType: 'column'
      },
      title: {
         text: 'Repartition des machines par OS et par salles'
      },
      xAxis: {
         categories: salles
      },
      yAxis: {
         min: 0,
         title: {
            text: 'Nombre de machines total'
         },
         stackLabels: {
            enabled: true,
            style: {
               fontWeight: 'bold',
               color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
            }
         }
      },
      legend: {
         align: 'right',
         x: -100,
         verticalAlign: 'top',
         y: 20,
         floating: true,
         backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
         borderColor: '#CCC',
         borderWidth: 1,
         shadow: false
      },
      tooltip: {
         formatter: function() {
            return '<b>'+ this.x +'</b><br/>'+
                this.series.name +': '+ this.y +'<br/>'+
                'Total: '+ this.point.stackTotal;
         }
      },
      plotOptions: {
         column: {
            stacking: 'normal',
            dataLabels: {
               enabled: false,
               color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
            }
         }
      },
       series: [{
         name: 'Inconnu',
         data: inconnu
      }, {
         name: 'Linux',
         data: linux
      }, {
         name: 'Mac OS',
         data: mac
      }, {
         name: 'Windows 7',
         data: win7
      }, {
         name: 'Windows XP',
         data: XP
      }]
   });
   
   


}

var chart3;
function ramalert(ram,cpu,agent,disque){
jQuery(document).ready(function() {
   chart3 = new Highcharts.Chart({
      chart: {
         renderTo: 'alert',
         type: 'spline',
           zoomType: 'x',
         spacingRight: 20
      },
      title: {
         text: 'Incidents relevés sur l\'année'
      },
      subtitle: {
         text: 'Pour zoomer, selectionner une zone.'   
      },
      xAxis: {
         type: 'datetime',
         dateTimeLabelFormats: { // don't display the dummy year
            month: '%e. %b',
            year: '%b'
         }
      },
      yAxis: {
         title: {
            text: 'nombre d\incidents'
         },
         min: 0
      },
      tooltip: {
         formatter: function() {
                   return '<b>'+ this.series.name +'</b><br/>'+
               Highcharts.dateFormat('%e. %b', this.x) +':  #'+ this.y +'';
         }
      },
      series: [{
         name: 'Utilisation RAM',
         // Define the data points. All series have a dummy year
         // of 1970/71 in order to be compared on the same x axis. Note
         // that in JavaScript, months start at 0 for January, 1 for February etc.
         data: ram
      },
      {
      	 name: 'Utilisation CPU',
         // Define the data points. All series have a dummy year
         // of 1970/71 in order to be compared on the same x axis. Note
         // that in JavaScript, months start at 0 for January, 1 for February etc.
         data: cpu
      },
      {
      	 name: 'Agent ne répond plus',
         // Define the data points. All series have a dummy year
         // of 1970/71 in order to be compared on the same x axis. Note
         // that in JavaScript, months start at 0 for January, 1 for February etc.
         data: agent
      },
      {
      	 name: 'Espace disque faible',
         // Define the data points. All series have a dummy year
         // of 1970/71 in order to be compared on the same x axis. Note
         // that in JavaScript, months start at 0 for January, 1 for February etc.
         data: disque
      }
      ]
   });
   
   
});
}


</script>